<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素大小和元素位置的信息(Information on element size and element position)</title>
  <!-- 
  在JavaScript中，了解元素的大小和位置对于网页布局和交互性至关重要。
  一、元素的大小
  1. 获取元素的宽度和高度：
    - 使用 offsetWidth 和 offsetHeight 属性可以获取元素的可见宽度和高度，包括内边距和边框，但不包括外边距。
    const element = document.getElementById('myElement');
    const width = element.offsetWidth;  // 获取元素的宽度
    const height = element.offsetHeight; // 获取元素的高度
  2. 获取元素的客户端宽度和高度：
    - 使用 clientWidth 和 clientHeight 属性获取元素的可见宽度和高度，不包括边框和外边距，但包括内边距。
    const clientWidth = element.clientWidth;  // 获取元素的客户端宽度
    const clientHeight = element.clientHeight; // 获取元素的客户端高度
  3. 获取元素的滚动宽度和高度：
    - 使用 scrollWidth 和 scrollHeight 属性可以获取元素的内容区域的宽度和高度，包括溢出部分（即超出可见区域的内容）。
    const scrollWidth = element.scrollWidth;  // 获取元素的滚动宽度
    const scrollHeight = element.scrollHeight; // 获取元素的滚动高度

  二、元素的位置
  1. 获取元素的位置信息：
    - 使用 getBoundingClientRect() 方法可以获取元素的大小及其相对于视口的位置。该方法返回一个包含元素的边界信息的 DOMRect 对象。
    const rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left); // 输出元素的边界位置
  2. 计算元素相对于文档的位置：
    - 可以通过结合 window.scrollX 和 window.scrollY 来计算元素相对于整个文档的位置。
    const elementTop = rect.top + window.scrollY; // 元素顶部相对于文档的距离
    const elementLeft = rect.left + window.scrollX; // 元素左侧相对于文档的距离

 总结
  - 元素大小：可以通过 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth 和 scrollHeight 获取元素的不同尺寸信息。
  - 元素位置：使用 getBoundingClientRect() 方法获取元素的边界位置，并结合 window.scrollX 和 window.scrollY 计算元素相对于文档的位置。
   -->
  <style>
    body {
      padding: 100px;
      border: 1px solid #ccc;
      ;
    }

    .size-position {
      width: 300px;
      height: 100px;
      padding: 20px;
      border: 10px solid #000;
      background-color: pink;
      overflow: auto;
    }
  </style>
</head>

<body>

  <div class="size-position">
    - 元素大小：可以通过 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth 和 scrollHeight 获取元素的不同尺寸信息。
    - 元素位置：使用 getBoundingClientRect() 方法获取元素的边界位置，并结合 window.scrollX 和 window.scrollY 计算元素相对于文档的位置。
  </div>

  <script>
    const sizePosition = document.querySelector('.size-position');

    // 1. 获取元素的大小信息
    const offsetWidth = sizePosition.offsetWidth; // 元素的宽度，包括边框和内边距
    const offsetHeight = sizePosition.offsetHeight; // 元素的高度，包括边框和内边距
    const clientWidth = sizePosition.clientWidth; // 元素的宽度，包括内边距，但不包括边框
    const clientHeight = sizePosition.clientHeight; // 元素的高度，包括内边距，但不包括边框
    const scrollWidth = sizePosition.scrollWidth; // 元素的宽度，包括内容区域和溢出内容
    const scrollHeight = sizePosition.scrollHeight; // 元素的高度，包括内容区域和溢出内容

    console.log('offsetWidth:', offsetWidth); // 360
    console.log('offsetHeight:', offsetHeight); // 160
    console.log('clientWidth:', clientWidth); // 323
    console.log('clientHeight:', clientHeight); // 140
    console.log('scrollWidth:', scrollWidth); // 323
    console.log('scrollHeight:', scrollHeight); // 229

    // 2. 获取元素的位置信息
    // 2.1 
    const offsetLeft = sizePosition.offsetLeft; // 元素相对于其父元素的左侧偏移量
    const offsetTop = sizePosition.offsetTop; // 元素相对于其父元素的顶部偏移量
    const clientLeft = sizePosition.clientLeft; // 元素左边框的宽度
    const clientTop = sizePosition.clientTop; // 元素上边框的宽度
    const scrollLeft = sizePosition.scrollLeft; // 元素水平滚动条的位置
    const scrollTop = sizePosition.scrollTop; // 元素垂直滚动条的位置

    console.log('offsetLeft:', offsetLeft); // 108
    console.log('offsetTop:', offsetTop); // 108
    console.log('clientLeft:', clientLeft); // 10
    console.log('clientTop:', clientTop); // 10
    console.log('scrollLeft:', scrollLeft); // 0
    console.log('scrollTop:', scrollTop); // 0

    // 2.2
    const rect = sizePosition.getBoundingClientRect();
    const rectTop = rect.top + window.scrollY; // 元素顶部相对于文档顶部的位置
    const rectTeft = rect.left + window.scrollX; // 元素左侧相对于文档左侧的位置

    console.log('top:', rectTop); // 108
    console.log('left:', rectTeft); // 108

    // 2.3
    window.onclick = function (e) {
      console.log('点击了', e.clientX, e.clientY, e.pageX, e.pageY, e.screenX, e.screenY, sizePosition.scrollTop);
    }

  </script>

</body>

</html>